<template>
	<view class="container">
		<!-- <topLogo></topLogo> -->
		<view class="tabs">
			<view class="tab-text" :class="tabindex == 0 ? 'active' : ''" @click="tabChange(0)">获得的温邻豆</view>
			<view class="tab-text" :class="tabindex == 1 ? 'active' : ''" @click="tabChange(1)">消耗的温邻豆</view>
		</view>
		<view class="list-container">
			<!-- <view class="order-tit">
				<view class="">
					积分明细
				</view>
			</view> -->
			<view class="list-div tab-head">
				<view class="list">
					<view class="list-1">时间</view>
					<view class="list-2">内容</view>
					<view class="list-3">积分</view>
				</view>
			</view>
			<view class="list-div">
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="list-1">
						{{ item.createTime.split(' ')[0] }}
					</view>
					<view class="list-2">
						{{ item.showTitle }}
					</view>
					<view class="list-3">
						<text class="blue">{{ item.integral > 0 ? '+' + item.integral : item.integral }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
// import uDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue'
export default {
	data() {
		return {
			range: [],
			pageNum: 1,
			pageSize: 1000,
			orderByColumn: 'createTime',
			isAsc: 'desc',
			total: 0,
			list: [],
			allList: [],
			loading: false,
			userCenterData: {
				user: {
					allScore: 0,
					useScore: 0
				}
			},
			tabindex: 0
		};
	},
	onLoad() {},
	onShow() {
		if (!this.$public.isLoginUrl()) return false;
		this.getScoreDetail();
		this.getUserInfo();
	},
	methods: {
		async getUserInfo() {
			this.$public.htmlPost('/api/getUserInfo').then((res) => {
				let data = res.data;
				if (data.code == 0) {
					this.userCenterData.user = data.data;
				}
			});
		},
		getScoreDetail() {
			let that = this;
			let startTime = '',
				endTime = '';
			if (this.range.length > 1) {
				startTime = this.range[0];
				endTime = this.range[1];
			}
			this.$public
				.htmlPost('/api/getScoreDetail', {
					startTime: startTime,
					endTime: endTime,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: this.orderByColumn,
					isAsc: this.isAsc
				})
				.then((res) => {
					console.log('积分明细接口', res);
					res.data.data.rows.forEach((item) => {
						// let text = ""
						// text += item.title + ' '
						// text += this.dateFormat(item.createTime) + ' '
						// text += item.integral > 0 ? '积分：+' + item.integral : '积分：' + item.integral
						// item.showText = text
						if (item.integral > 0) {
							that.list.push(item);
						}
						that.allList.push(item);
					});
					// this.list = res.data.data.rows
					// this.total = res.data.data.total
				});
		},
		pageChange(e) {
			console.log('e', e);
			this.pageNum = e.current;
			this.getScoreDetail();
		},
		changeTime(time) {
			console.log('time', time);
			this.range = time;
			this.getScoreDetail();
		},
		tabChange(index) {
			let that = this;
			that.tabindex = index;
			if (index == 1) {
				that.list = [];
				that.allList.forEach((item) => {
					if (item.integral < 0) {
						that.list.push(item);
					}
				});
			} else {
				that.list = [];
				that.allList.forEach((item) => {
					if (item.integral > 0) {
						that.list.push(item);
					}
				});
			}
		},
		dateFormat(time) {
			let date = new Date(time);
			let year = date.getFullYear();
			// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			// 拼接
			// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			return year + '-' + month + '-' + day + '- ' + hours + ':' + minutes;
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	background: #f8f8f8;
	height: 93vh;
	padding: 40rpx 30rpx;
}

.cover-container {
	background: #fff;
	/* margin-top: -100upx; */
	/* padding: 0 30upx; */
	position: relative;
	/* padding-bottom: 20upx; */
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	padding: 0 25rpx;

	.top {
		display: flex;
		justify-content: space-between;
		text-align: center;

		border-bottom: $uni-wl-bottom-border;
	}

	.top-l {
		height: 180rpx;
		display: flex;
		/* align-items: center; */
		flex-direction: column;
		justify-content: center;
	}

	.top-l-s {
		font-size: 30rpx;
		color: #333;
	}

	.top-l-x {
		font-size: 36rpx;
		color: #0f8eee;
		margin-top: 25rpx;
	}

	.xia {
		display: flex;
		justify-content: space-between;
		height: 108rpx;
		align-items: center;
		font-size: 30rpx;
		color: #333;
	}
}

.list-container {
	/* padding: 30rpx; */
	background: #fff;
	margin-top: 30rpx;

	.order-tit {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;

		.mx {
			font-size: 24rpx;
		}
	}

	.list-div {
		padding: 0 30rpx;

		&.tab-head {
			background-color: #fafafa;

			font-size: 26rpx;

			color: #999999;

			/* padding: 0; */
			.list {
				border-bottom: 0;
			}
		}

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
			border-bottom: $uni-wl-bottom-border;
			font-size: 24rpx;

			.list-1 {
				width: 200rpx;
				/* overflow: hidden;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis; */
				font-size: 26rpx;
				text-align: center;
			}

			.list-2 {
				width: 300rpx;
				text-align: center;
			}

			.list-3 {
				width: 130rpx;
				text-align: center;
			}

			.blue {
				color: #df686a;
			}
		}
	}
}

.tabs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	color: #999999;

	font-size: 30rpx;
	background-color: #fff;

	border-radius: 36rpx;
	height: 72rpx;

	.tab-text {
		width: 50%;
		text-align: center;
		height: 72rpx;
		line-height: 72rpx;

		&.active {
			background: linear-gradient(135deg, #df686a 0%, #ee8d56 100%);
			border-radius: 36rpx;
			color: #fff;
		}
	}
}
</style>
